<template>
    <div id="roleMenu">
        <h2> <i :class="'el-icon-user-solid'"></i> {{roleName}}</h2>
        <el-divider></el-divider>
        <el-button type="primary" @click="showAdd" >分配新菜单</el-button>
        <h4>已分配的菜单:</h4>
        <el-divider></el-divider>
        <el-table
                :data="tableData.rows"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                :tree-props="{children: 'children', hasChildren: 'true'}">


            <el-table-column
                    prop="id"
                    sortable
                    label="编号">
            </el-table-column>

            <el-table-column
                    prop="path"
                    label="路径">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="菜单名称">
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序(小到大)">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="菜单描述">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="deleteMenu(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, prev, pager, next,sizes"
                :page-size="tableData.size"
                :current-page="tableData.current"
                @current-change="requestData"
                @size-change="requestData"
                :total="tableData.total">
        </el-pagination>

        <el-dialog
                title="添加角色未拥有的权限"
                :visible.sync="addDialogVisible"
                width="60%"
                @close="requestData"
                center>

            <el-collapse accordion>
                <el-collapse-item v-for="item in isNotExistData.rows">
                    <template slot="title">
                        {{item.name}}    --   {{item.description}}
                    </template>
                    <div>

                        <el-table
                                :data="item.children"
                                ref="multipleTable"
                                tooltip-effect="dark"
                                style="width: 100%"
                                max-height="500"
                                @selection-change="selectionChange">

                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>

                                <el-table-column
                                        prop="id"
                                        sortable
                                        label="编号">
                                </el-table-column>

                                <el-table-column
                                        prop="path"
                                        label="路径">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="菜单名称">
                                </el-table-column>
                                <el-table-column
                                        prop="sort"
                                        label="排序(小到大)">
                                </el-table-column>
                                <el-table-column
                                        prop="description"
                                        label="菜单描述">
                                </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item>
            </el-collapse>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" :aria-disabled="true" @click="addRoleMenu">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "RoleMenu",
        data(){
            return{
                addDialogVisible: false,
                id: null,
                role: null,
                form: {
                    id: null,
                    path: null,
                    name: null,
                    sort: null,
                    parentId: null
                },
                tableData: {
                    total: null,
                    size: 1000,
                    current: 1,
                    rows: [
                        {
                            id: null,
                            path: null,
                            name: null,
                            sort: null,
                            parentId: null,
                            children:[]
                        }
                    ]
                },
                isNotExistData: {
                    total: null,
                    size: 1000,
                    current: 1,
                    rows: [
                        {
                            id: null,
                            path: null,
                            name: null,
                            sort: null,
                            parentId: null,
                            children:[]
                        }
                    ]
                },
                addData: {
                    roleId: null,
                    roleName:null,
                    menuList: [
                        {
                            id:null
                        }
                    ]
                },
                roleMenu: {
                    roleId: null,
                    menuId: null
                }
            }
        },

        methods: {
            async requestData() {
                let resp = await this.$http.get("/sysMenu/getTreeByRoleId/" + this.id);
                let data = resp.data;
                if (data.code === 200) {
                    this.tableData = data;
                } else {
                    this.$message.error(data.info);
                }
            },
            deleteMenu(index,row){
                this.$confirm("确定移除吗?","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(() => {
                    this.roleMenu.roleId = this.id;
                    this.roleMenu.menuId = row.id;
                    this.$http.post("/sysRoleMenu/delete",this.roleMenu).then(resp => {
                        const data = resp.data;
                        if (data.code === 200){
                            this.$message.success(data.info);
                            this.requestData();
                        }else {
                            this.$message.error(data.info);
                        }
                    })
                }).catch(() => {})
            },
            async showAdd() {
                this.addDialogVisible = true;
                let resp = await this.$http.get("/sysMenu/getTreeByNotRoleId?id=" + this.id);
                let data = resp.data;
                if (data.code === 200){
                    this.isNotExistData = data;
                }else {
                    this.$message.error(data.info);
                }
            },
            selectionChange(rows){
                this.addData.menuList = rows;
            },
            async addRoleMenu() {
                this.addData.roleId = this.id;
                this.addData.roleName = this.roleName;
                let resp = await this.$http.post("/sysRoleMenu/add", this.addData);
                let data = resp.data;
                if (data.code === 200) {
                    this.$message.info(data.info);
                    this.showAdd();
                    this.addData.menuList = [];
                }else {
                    this.$message.error(data.info);
                }
            }
        },

        created() {
            this.id = this.$route.query.id;
            this.roleName = this.$route.query.roleName;
            this.requestData();
        }
    }
</script>

<style scoped>

</style>
